<template>
  <div class="select-chat-type-container">
    <template v-for="(chart) in chartTypeListWithChildren">
      <div
        v-if="!chart.hide"
        :key="chart.id"
        style="position: relative;"
        class="chart-item"
      >
        <el-dropdown v-if="chart.children" trigger="click">
          <div :class="{'active': findItem(chart.children).id === value}" class="chat-item">
            <img :src="findItem(chart.children).icon" class="img" alt="">
            <div class="label">{{ findItem(chart.children).name }}<tipIcon v-if="findItem(chart.children).tipicon" :content="findItem(chart.children).tipicon" class="ml5"/></div>
            <i class="el-icon-arrow-down"/>
          </div>
          <el-dropdown-menu slot="dropdown" style="margin: 0 0 5px 0;">
            <el-dropdown-item v-for="item in chart.children" :key="item.id" class="dropdown-item">
              <div :class="{'chat-child-active': item.id === value}" class="chat-child-item" @click="selectChartType(item)">
                <img :src="item.icon" class="img" alt="">
                <div class="label">{{ item.name }}<tipIcon v-if="item.tipicon" :content="item.tipicon" class="ml5" /></div>
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div v-else :class="{'active': chart.id === value}" class="chat-item" @click="selectChartType(chart)">
          <img :src="chart.icon" class="img" alt="">
          <div class="label">{{ chart.name }}
            <tipIcon v-if="chart.tipicon" :content="chart.tipicon" class="ml5"/>
          </div>
        </div>
        <img v-if="chart.id === value || findItem(chart.children).id === value" :src="selectIcon" class="select-icon" alt="">
      </div>
    </template>
  </div>
</template>
<script>
import { chartTypeListWithChildren } from '@/filters/status';
import selectIcon from '@/assets/reportManage/chart-type-select.png';
export default {
  model: {
    prop: 'value',
    event: 'changeValue'
  },
  props: {
    value: {
      type: String | Number,
      default: ''
    }
  },
  data: () => {
    return {
      selectIcon,
      chartTypeListWithChildren
    };
  },
  methods: {
    findItem(children) {
      if (!Array.isArray(children)) return false;
      return children.find(item => item.id === this.value) || children[0];
    },
    selectChartType(item) {
      this.$emit('selectChartType', item);
      this.$emit('changeValue', item.id);
    }
  }
};
</script>
<style scoped lang="scss">
.select-chat-type-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.ml5 {
  margin-left: 5px;
}
.chat-item {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  width: 180px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #333;
  font-size: 14px;
  background-color: #fff;
  cursor: pointer;
  position: relative;
  .label {
    display: flex;
    align-items: center;
  }
  &.active {
    overflow: hidden;
    .label {
      color: #406eff;
    }
    border-color: #406eff;
  }
  .label {
    flex: 1;
  }
  .chat-inline {
    display: flex;
    align-items: center;
    flex: 1;
  }
}
.chat-child-item {
  display: flex;
  align-items: center;
  width: 180px;
  height: 32px;
  padding: 0 10px;
  font-size: 14px;
  margin-bottom: 5px;
  &:hover {
    background-color: #f2f2f2;
  }
}
.chat-child-active {
  background-color: #edeef2;
  color: #406eff;
  font-weight: bold;
}
.select-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
}
.img {
  width: 20px;
  height: 20px;
  margin-right: 4px;
}
.dropdown-item {
  background-color: #fff !important;
  padding: 0;
}
</style>
